<template>
  <div>
    <!-- <div class="header">
      
      <van-tabs v-model="active">
         <van-search v-model="searchVal" placeholder="请输入搜索关键词" disabled @click="toSearch"/>
        <van-tab title="关注">
          <Attention />
        </van-tab>

        <van-tab title="发现">
          <van-tabs>
            <van-tab v-for="index in findarr" :key="index.i" :title="index">
              <div v-if="index=='推荐'">
                  <Featured />
              </div>
              <div v-else>{{index}}</div>
            </van-tab>
          </van-tabs>
        </van-tab>
        <van-tab title="附近">
          <Round />
        </van-tab>
     
      </van-tabs>
      
    </div> -->
  <van-sticky>
   <div class="nav">
     
        <div class="nav_left">
          <img src="../../assets/imgs/wm.png" @click="showPopup" >
        </div>
        <van-popup v-model="show" position="left" :style="{ width: '60%',height:'100%' }">
          <Leftpanel/>
        </van-popup>
        
        <div class="nav_center">
          <ul class="nav_tab">
            <li class="tab-item">
              <router-link to="/home/attention">关注</router-link>
              
            </li>
            <li class="tab-item">
              <router-link to="/home/featured">发现</router-link>
              
            </li>
            <li class="tab-item">
              <router-link to="/home/round">附近</router-link>
             
            </li>
          </ul>
        </div>
        <div class="nav_right">
          <img src="../../assets/imgs/camera.png" alt="">
        </div>

     
      </div>
      </van-sticky>
      <router-view></router-view>
    
      <van-tabbar >
        <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>     
        <van-tabbar-item icon="shopping-cart" to="/shop">商城</van-tabbar-item>
        <van-tabbar-item icon="chat-o" to="/news">消息</van-tabbar-item>
        <van-tabbar-item icon="user-circle-o" to="/users">我</van-tabbar-item>
      </van-tabbar>
    
  </div>
</template>

<script>
// import Attention from "./Attention.vue";
// import Round from "./Round.vue";
// import Featured from "./Featured.vue";
import Leftpanel from "./Leftpanel.vue"
export default {
  components: { Leftpanel},
  data() {
    return {
      show:false,
      searchVal:'',
      active: 1,
      actives:1,
      findarr: [
        "推荐",
        "视频",
        "直播",
        "旅行",
        "运动健身",
        "体育",
        "摄影",
        "家居家装",
      ],
    };
  },
  methods:{
    showPopup(){
      this.show=true
    }
  }
};
</script>

<style lang="less" scoped>
.nav{
  background: #fff;
  display: flex;
  flex-direction: row;
  .nav_left{
    flex: 1;
    padding-top: 20px;
    text-align: center;
    
  }
  img{
      width:25px;
      height: 25px;
    }   
  .nav_center{
      flex: 3;
      height: 45px;
      line-height: 45px;
      padding-top: 8px;
    }
  ul li{
    list-style: none;
  }
  .nav_tab{
    width:100%;
    display:flex;
    flex-direction:row;
    .tab-item a{
       text-decoration: none;
    }
    .tab-item{
      width: 27%;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
    }            
  }
  .nav_right{
    flex: 1;
    padding-top: 20px;
    text-align: center;
  }
        
}

</style>